<div class="container-fluid">
  <div ng-if="paramChanges.length === 0">
    <div class="row-fluid">
      <div class="span11">
        <em>No parameter changes have been defined.</em>
      </div>
      <div class="span1"></div>
    </div>
  </div>

  <div ng-repeat="param in paramChanges">
    <div class="row-fluid">
      <div class="span1">
        <[$index + 1]>.
      </div>
      <div class="span7">
        <span ng-if="activeItem !== $index">
          Change <b><[param.name]></b> <[HUMAN_READABLE_ARGS_RENDERERS[param.generator_id](param.customization_args)]>
        </span>

        <div ng-if="activeItem === $index">
          <form novalidate class="oppia-form" name="newParameterForm" ng-submit="commitParamChange(activeItem)">
            Select a parameter to change:

            <select2-dropdown item="tmpParamChange.name" choices="paramNameChoices" placeholder="Choose or type new" new-choice-regex="^[A-Za-z]+$" width="180px">
            </select2-dropdown>

            <span ng-show="tmpParamChange.name">
              <select ng-model="tmpParamChange.generator_id"
                      ng-options="key as PREAMBLE_TEXT[key] for (key, value) in ALLOWED_KEYS"
                      style="width: 220px;" required>
              </select>

              <value-generator-editor generator-id="tmpParamChange.generator_id"
                                      customization-args="tmpParamChange.customization_args"
                                      obj-type="getObjTypeForParam(tmpParamChange.select2Name.text) || 'UnicodeString'">
              </value-generator-editor>
            </span>
            <br>

            <input type="submit" value="Close editor">
          </form>
        </div>
      </div>

      <div class="span3">
        <span class="pull-right">
          <button type="button" ng-disabled="activeItem !== -1" ng-click="startEditParamChange($index)">
            Edit
          </button>

          <button ng-show="$index != 0" ng-disabled="activeItem !== -1" ng-click="swapParamChanges($index, $index - 1)">⇑</button>
          <span ng-hide="$index != 0" class="oppia-grayed">⇑</span>

          <button ng-show="$index < paramChanges.length - 1" ng-disabled="activeItem !== -1" ng-click="swapParamChanges($index, $index + 1)">⇓</button>
          <span ng-hide="$index < paramChanges.length - 1" class="oppia-grayed">⇓</span>

          <button type="button" ng-disabled="activeItem !== -1 && activeItem !== $index" ng-click="deleteParamChange($index)">
            &times;
          </button>
        </span>
      </div>

      <div class="span1"></div>
    </div>
  </div>

  <div class="row-fluid">
    <div class="span8"></div>

    <div class="span3">
      <button type="button" ng-disabled="activeItem !== -1" ng-click="startAddParamChange()" class="pull-right">
        Add new
      </a>
    </div>

    <div class="span1"></div>
  </div>
</div>
